<template>
    <div class="round-progress">
        <div class="round-progress-any">
            <slot/>
        </div>
        <canvas class="round-progress-canvas" data-run="0" :data-max="max" :data-value="value" :width="width"
                :height="height" ref="canvas" :id="id"></canvas>
    </div>
</template>

<script>
    /* eslint-disable no-undef */
    import Circle from '../../plugins/Circle';

    export default {
        name: 'round-progress',
        data () {
            return {
                setting: this.options
            };
        },
        props: {
            id: {type: String, required: true},
            max: {type: Number, default: 1000},
            value: {type: Number | String, required: true},
            width: {type: String | Number, default: 285},
            height: {type: String | Number, default: 285},
            options: {type: Object, required: true}
        },
        methods: {
            initCanvas () {
                let canvas = $(this.$refs.canvas);
                this.setting.percent = canvas.attr('data-value') / canvas.attr('data-max');
                this.setting.obj = this.id;
                this.setting.width = this.width;
                this.setting.height = this.height;
                Circle.runCircle(this.setting);
            }
        },
        mounted () {
            this.initCanvas();
        }
    };
</script>

<style scoped lang="scss">
    .round-progress {
        margin-top: 2em;
        position: relative;
        float: left;
        .round-progress-any {
            width: 100%;
            position: absolute;
            text-align: center;
            left: 0;
            top: 50%;
            height: 5.75em;
            margin-top: -2.25em;
            font-size: 1em;
            z-index: 3;
            p {
                font-size: 1.1em;
                color: #fa5527;
                margin: 0;
                padding: 0;
            }
            p:first-child {
                color: #fa5527;
                font-size: 1em;
                padding-bottom: 0.5em;
            }
        }
        .round-progress-canvas {
            display: block;
            margin: 0 auto;
            padding: 0;
            width: 76%;
        }
    }
</style>
